<script setup lang="ts">
// 参数: 时间 标题 图片 链接
defineProps({
  link: {
    type: String,
    default: () => '/'
  }
})
</script>

<template>
  <div class="card">
    <div class="poster">
      <img src="" alt="">
    </div>
    <div class="infos">
      <div class="time">2024-01-01</div>
      <div class="intro">执象团队2009年成立至今所服务客服务客服务客服务客服务客户汇总</div>
      <div class="view-more">
        <NuxtLink class="more" :to="link">
          <ViewMore/>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card {
  width: 6.54rem;
  height: 7.93rem;

  &:hover {
    .infos {
      transition: 0.2s;
      background: #157fbb;
    }
  }

  .poster {
    img {
      display: block;
      width: 6.53rem;
      height: 4.04rem;
    }
  }

  .infos {
    width: 6.54rem;
    height: 3.89rem;
    background: #323941;
    color: #fff;
    padding-left: 0.57rem;
    padding-top: 0.49rem;
    transition: 0.2s;

    .time {
      font-size: 0.3rem;
      font-weight: 400;
      margin-bottom: 0.36rem;
    }

    .intro {
      width: 5.31rem;
      height: 1.14rem;
      font-size: 0.35rem;
      font-weight: 500;
      line-height: 0.6rem;
      margin-bottom: 0.61rem;
      text-overflow: ellipsis; // 超出用省略号显示
      overflow: hidden; // 超出的文本隐藏
      display: -webkit-box; // 作为弹性伸缩盒子模型显示
      -webkit-line-clamp: 2; // 显示的行
      -webkit-box-orient: vertical;
    }
  }
}
</style>
